<template>
    <h4>路由信息对象&路由元信息</h4>
    <pre class="note">
    1. app.use(router) 安装路由模块时 提供全局组件可直接方法的全局属性 $route
        + $route 是一个记录了激活路由信息的对象，存储当前激活路由的相关信息（包括：地址、参数、元数据……）
        + $route 以全局属性定义，所以项目中所有的组件共享该对象
        + $route 以可控数据方式构成只读对象功能，因此只能访问，不能被修改
        <img src="@/assets/error/49.png" alt="" srcset="">

    2. 因为 $route 是通过 app.config.globalProperties 方式进行定义的，所以在任何组件中通过this实例，或者页面模板语法都可以直接访问
        + 方法获取
        <img src="@/assets/error/50.png" alt="" srcset="">
        + 模板语法加载
        <img src="@/assets/error/51.png" alt="" srcset="">
    </pre>
    <input type="button" value="方法打印$route" @click="printRoute()">
    <pre>{{ $route.path }}</pre>
    <pre v-text="$route.path"></pre>
    
    <pre class="note">
    3. 激活路由元信息数据
        + 在路由配置时，可以通过路由配置属性 meta 属性为路由提供信息对象数据，组件可以通过$route.meta 加载信息数据
        + 在路由进行切换时，该信息数据也会随着路由的切换同步发生变化
        <img src="@/assets/error/52.png" alt="" srcset="">
    </pre>
    <pre>{{ $route.meta }}</pre>

</template>

<script>
export default {
    methods:{
        printRoute(){
            console.log(this.$route);
        }
    }
}
</script>

<style lang="scss" scoped>

</style>